@import "./flex.scss";

page {
	width: 100%;
	height: 100%;
}

.a-page {
	width: 100%;
	height: 100vh;
}

* {
	box-sizing: border-box;
}

.page {
	width: 100%;
	height: 100%;
}

.tab-bar-page {
	padding-bottom: 143rpx;
}

$skeleton-bg-color: #f2f3f5;

/* 绘制一个圆 */
@mixin circle($num) {
	width: #{$num}rpx;
	height: #{$num}rpx;
	border-radius: 50%;
}

/* 用户头像样式 */
@mixin avatar($num) {
	@include circle(#{$num});
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
	}
}

;

/* button公共样式 */
@mixin button {
	// @include flex-r-center-center;
	width: max-content;
	padding: 0;
	margin: 0;
	outline: none;
	border: none;

	&::after {
		display: none;
	}
}

/*盒子边框样式*/
@mixin box {
	background-color: #ffffff;
	box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
	border-radius: 10rpx;
	overflow: hidden;
}

//单行内容超出部分省略号显示
@mixin essipsis{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
// 客户,联系人,任务等列表公共样式
@mixin list {
		padding: 28rpx 28rpx 0;
		.header{
			@include flex-r-between-center;
			.left{
				font-size: 28rpx;
				color: #101010;
				line-height: 40rpx;
			}
			.right{
				color: #3388ff;
				border: #3388FF 4rpx solid;
				font-size: 20rpx;
				height: 36rpx;
				padding: 0 15rpx;
				line-height: 36rpx;
				border-radius: 4rpx;
			}
		}
		.details{
			@include flex-r-wrap;
			padding: 24rpx 0 0;
			.det-item{
				width: 33.3%;
				padding: 0 0 24rpx;
				>view{
					color: #9A9A9A;
					font-size: 24rpx;
					line-height: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.tag{
					padding: 0 0 10rpx;
				}
			}
		}
}
//筛选弹出框样式
@mixin popup{
	padding: 28rpx 28rpx 38rpx;
	.filter-container{
		padding: 0 0 28rpx;
		.title{
			color: #000000;
			font-size: 28rpx;
			padding: 0 0 20rpx;
		}
		.filter-list{
			display: grid;
			row-gap: 20rpx;
			column-gap: 40rpx;
			grid-template-columns: repeat(3,1fr);
			.item{
				text-align: center;
				background-color: #A4ADB3;
				font-size: 28rpx;
				color: #fff;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				&.select{
					background-color: #198AFA;
				}
			}
		}
	}
	.footer{
		@include flex-r-between-start;
		padding: 36rpx 0 0;
		button{
				width: max-content;
				padding: 0;
				margin: 0;
				outline: none;
				border: none;
				height: 60rpx;
				width: 45%;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #fff;
			
				&::after {
					display: none;
				}
		}
		.cencle{
			background-color: #BEBEBE;
		}
		.confire{
			background-color: #198AFA;
		}
	}
}
//运维部分公共样式
@mixin common {
	padding: 0 0 40rpx;
	
	.container {
		box-shadow: -1px 1px 7px 0px rgba(204, 204, 204, 0.42);
		border-radius: 10px;
		background-color: #fff;
	
		>.title {
			@include flex-r-between-center;
			padding: 16rpx 20rpx;
			background-color: #E6E6E6;
			font-size: 32rpx;
			color: #000000;
			line-height: 45rpx;
			border-radius: 10px 10px 0px 0px;
	
			.right {
				color: #0D40F4;
				font-size: 25rpx;
			}
		}
	}
}